{% extends 'core/base.html' %}
{% block content %}
<div class="search-container">
    <h2>垃圾分类查询</h2>

    <div class="search-form-container">
        <form method="get" action="{% url 'search' %}" class="search-form">
            <div class="search-input-wrapper">
                <input type="text" name="q" placeholder="请输入垃圾名称..." value="{{ keyword }}">
                <button type="submit" class="search-button">查询</button>
            </div>
        </form>
    </div>

    <div class="search-results">
        {% if results %}
            <h3>查询结果：</h3>
            <ul class="results-list">
                {% for item in results %}
                    <li class="result-item">
                        <a href="{% url 'trash_detail' item.id %}" class="result-link">
                            <span class="item-name">{{ item.name }}</span>
                            <span class="item-category">{{ item.category }}</span>
                        </a>
                    </li>
                {% endfor %}
            </ul>
        {% elif keyword %}
            <div class="no-results">
                <div class="no-results-icon">🔍</div>
                <p>未找到与 "<strong>{{ keyword }}</strong>" 相关的垃圾。</p>
                <p class="suggestion">请尝试其他关键词，或者检查拼写是否正确。</p>
            </div>
        {% endif %}
    </div>
</div>

<style>
    .search-container {
        max-width: 800px;
        margin: 0 auto;
    }

    .search-form-container {
        background-color: #e8f5e9;
        padding: 2rem;
        border-radius: 10px;
        margin-bottom: 2rem;
    }

    .search-form {
        max-width: 600px;
        margin: 0 auto;
    }

    .search-input-wrapper {
        display: flex;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        border-radius: 50px;
        overflow: hidden;
    }

    .search-input-wrapper input {
        flex: 1;
        border: none;
        padding: 15px 25px;
        font-size: 1.1rem;
        border-radius: 50px 0 0 50px;
    }

    .search-input-wrapper input:focus {
        outline: none;
    }

    .search-button {
        padding: 15px 30px;
        border-radius: 0 50px 50px 0;
        font-size: 1.1rem;
        background-color: var(--primary);
    }

    .search-results {
        padding: 1rem 0;
    }

    .results-list {
        list-style-type: none;
        padding: 0;
    }

    .result-item {
        margin-bottom: 0.8rem;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .result-item:hover {
        transform: translateY(-3px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .result-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 1.5rem;
        color: var(--text);
        text-decoration: none;
    }

    .result-link:hover {
        text-decoration: none;
    }

    .item-name {
        font-weight: 500;
    }

    .item-category {
        background-color: var(--primary);
        color: white;
        padding: 5px 10px;
        border-radius: 20px;
        font-size: 0.9rem;
    }

    .no-results {
        text-align: center;
        padding: 3rem 1rem;
        background-color: #f5f5f5;
        border-radius: 10px;
    }

    .no-results-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    .suggestion {
        color: var(--text-light);
        margin-top: 0.5rem;
    }

    @media (max-width: 768px) {
        .search-input-wrapper {
            flex-direction: column;
            box-shadow: none;
        }

        .search-input-wrapper input {
            border-radius: 50px;
            margin-bottom: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }

        .search-button {
            border-radius: 50px;
        }

        .result-link {
            flex-direction: column;
            align-items: flex-start;
        }

        .item-category {
            margin-top: 0.5rem;
        }
    }
</style>
{% endblock %}